Añadiendo una lupa ...

Hace unos días hablaba sobre Lytebox, los problemas con los scripts y su respectivo alojamiento me hicieron crear una nueva entrada para añadir los archivos a la plantilla.

Ocurre como con todo, cuando empezamos cualquier cosa nos parece un rascacielos, poco a poco no lo vemos tan alto y el rascacielos pasa a ser un adosado. Ahí es cuando pensamos que si conseguimos escalar unos cuantos pisos también podemos subir unos escalones y nos animaos a rizar el rizo.

Me preguntaba Priamo la forma de añadir una lupa a las imágenes que mostramos en la ventana modal de Lytebox con la idea de informar que puede ser ampliada.

Imagino que habrá varias formas de conseguirlo pero voy a explicarlo de dos. Con la lupa al pasar el cursor sobre la imagen y situando la lupa fuera de la imagen.

Si queremos que al pasar el cursor muestre una imagen en este caso una lupa lo primero que haremos será añadir unos estilos a la plantilla.

Nos situamos antes de ]]></b:skin> y añadimos:

#lupa {
text-align: center;
}
#lupa a img {
cursor: url("url-imagen-lupa"), pointer;
margin: 3px 3px 0 3px;
}

La imagen procuraremos que tenga fondo transparente, a ser posible en formato png. En Google si escribimos "lupa" y vamos a la pestaña "imágenes" encontraremos varias y en diferentes tamaños.

Una vez tenemos los estilos con la imagen lo que haremos será añadir el código de Lytebox en el editor de entradas.

<a href="Url-de-la-imagen" rel="lytebox" title="Título">texto o imagen</a>

Añadimos unos estilos al mismo código para escoger el tamaño de la miniatura sin necesidad de retocar la imagen.

<a href="Url-de-la-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>

Para mostrar la lupa añadimos lo marcado en color verde.

<div id="lupa">
<a href="Url-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>
</div>

Y centramos la imagen (color naranja)

<center> <div id="lupa">
<a href="Url-imagen" rel="lytebox" title="Título"><img width="100" alt="Imagen-lupa" src="url-imagen" height="90"/></a>
</div> </center>

J.Miur proporcionaba una idea estupenda para añadir estilos a los vídeos y partiendo de esa idea vamos a darle un poco más de vidilla a las imágenes.

A los estilos que añadimos anteriormente añadimos borde, fondo y redondeamos las esquinas.

#lupa {
text-align: center;
}
#lupa a img {cursor: url("url-imagen"), pointer;
-moz-border-radius: 8px;
background-color: #ccc;
border: 1px solid #2e2e2e;
margin: 3px 3px 0 3px;
}

También podemos añadir efecto hover.

#lupa a img:hover {
background:#DDDDDD none repeat scroll 0 0;
border:1px solid #D2D2D2;
}

Si lo que tratamos de añadir es un grupo de imágenes optaríamos por añadir un código a continuación de otro dejando un espacio entre las imágenes y respetando la etiqueta center.

<center><div id="lupa"><a href="url-imagen" rel="lytebox" title="Ampliar"><img style="width: 150px; height: 100px;" src="url-imagen" /></a> <a href="url-imagen" rel="lytebox" title="Ampliar"><img style="width: 150px; height: 100px;" src="url-imagen" /></a>
</div></center>

En url-imagen añadimos la url de la imagen, da igual si la imagen es grande para la miniatura porque ya escogemos el tamaño para mostrarla con width y height.

Añadir la lupa fuera de la imagen es otra historia.. necesitamos crear tablas para que cada tabla acoja en su interior las dos imágenes, miniatura y lupa y alteramos el orden del código de forma que la miniatura se muestra como una imagen y el enlace para ampliar la imagen se lo añadimos a la lupa.

<center>
<img src="url-imagen" style="height: 83px; width: 110px;" /></center><center><a href="url-imagen" rel="lytebox" title="Ampliar"><img src="url-imagen-lupa" style="margin-top: 5px;" /></a>
</center>



Creamos la tabla.

<center><table border="0"><tbody><tr>
<td><center>Contenido1</center>
</td>
<td><center>Contenido2</center>
</td>
<td><center>Contenido3</center>
</td>
</tr></tbody></table></center>

En Contenido1-2-3- incluimos el código que corresponda para mostrar la imagen, si deseamos más imágenes añadimos tantas líneas como imágenes vamos a añadir.

También podemos añadir estilos al igual que con las imágenes individuales pero los tendríamos que añadir a la imagen y en el código de la tabla en lugar del enlace, de lo contrario los estilos se añaden también a la lupa.
Sería algo así:

<img src="url-imagen" style="height: 83px; width: 110px;-moz-border-radius: 8px;background-color: #ccc; border: 1px solid #2e2e2e;" /><a href="url-imagen" rel="lytebox" title="Ampliar"><img src="url-imagen-lupa" style="margin-top: 5px;" /></a>




"La lupa sobre la imagen y el efecto de esquinas redondeadas no se visualiza con Explorer, en su lugar veremos el cursor de la "mano" y líneas rectas"